<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref } from 'vue';
import Card from '../../components/Card.vue';
import ActivityCard from './components/ActivityCard.vue';
//import Banner from '../../static/banner'

const swiperImageList = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
])

function goToActivityDetail(id: number) {
  Taro.navigateTo({
    url: `/pages/detail/activity?id=${id}`,
  })
}

function navigateDirectivelyTo(path: string) {
  Taro.navigateTo({
    url: path,
  })
}

const redirectToSearchPage = () => Taro.switchTab({
  url: '/pages/search/index'
})

// const osusumeList = ref<Array<ActivityCardPropsType & { id: number }>>([
//   {
//     id: 1,
//     imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-ji.net%2FtujiJDAwMy50YW9iYW9jZG4uY29tL2Jhby91cGxvYWRlZC9pMy9UQjFIY1ZfRlYkNlgyWFYkNSQz.jpg&refer=http%3A%2F%2Fwww.t-ji.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666700890&t=07763c3ed57ee0e02acb28e33cb993d2',
//     title: '思想政治1：经济与生活',
//     publishDate: new Date,
//     startDate: new Date,
//     endDate: new Date,
//     reserved: 7,
//     rest: 30,
//     point: 1,
//     address: '图书馆六楼602'
//   },
// ])

// const saikinList = ref<Array<ActivityCardPropsType & { id: number }>>([
//   {
//     id: 1,
//     imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-ji.net%2FtujiJDAwMy50YW9iYW9jZG4uY29tL2Jhby91cGxvYWRlZC9pMy9UQjFIY1ZfRlYkNlgyWFYkNSQz.jpg&refer=http%3A%2F%2Fwww.t-ji.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666700890&t=07763c3ed57ee0e02acb28e33cb993d2',
//     title: '思想政治1：经济与生活',
//     publishDate: new Date,
//     startDate: new Date,
//     endDate: new Date,
//     reserved: 7,
//     rest: 30,
//     point: 1,
//     address: '图书馆六楼602'
//   }
// ])
</script>

<template>
  <view>
    <nut-navbar :left-show="false">
      <template #content>
        <nut-searchbar @click="redirectToSearchPage">
          <template v-slot:leftin>
            <nut-icon size="14" name="search2"></nut-icon>
          </template>
        </nut-searchbar>
      </template>
      <template #right>
        <nut-icon name="scan2"></nut-icon>
        <nut-icon name="notice"></nut-icon>
      </template>
    </nut-navbar>
    <view class="h-350">
      <nut-swiper :init-page="1" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
        <nut-swiper-item v-for="(_, idx) in swiperImageList" >
          <image class="h-350 w-full" :key="idx" src="../../static/banner.jpg" alt="" />
        </nut-swiper-item>
      </nut-swiper>
    </view>
    <view class="grid grid-flow-col grid-cols-3gap-4 my-2 py-1">
      <view @click="() => navigateDirectivelyTo('/pages/reserve/activity')"
        class="flex justify-center text-35 rounded-md bg-[#FA685D] text-white mx-1">活动预约</view>
      <view @click="() => navigateDirectivelyTo('/pages/reserve/teacher')"
        class="flex justify-center text-35 rounded-md bg-[#FA685D] text-white mx-1">导师预约</view>
      <view @click="() => navigateDirectivelyTo('/pages/reserve/my')"
        class="flex justify-center text-35 rounded-md bg-[#FA685D] text-white mx-1">我的预约</view>
    </view>
    <view>
      <nut-grid :column-num="3">
        <nut-grid-item>
          <image src="../../static/byds.png" class="h-70" />
          <text class="text-[#f56c23] text-5">博雅读书</text>
        </nut-grid-item>
        <nut-grid-item>
          <image src="../../static/byxq.png" class="h-70" />
          <text class="text-[#f56c23] text-5">博雅心情</text>
        </nut-grid-item>
        <nut-grid-item>
          <image src="../../static/bysj.png" class="h-70" />
          <text class="text-[#f56c23] text-5">博雅实践</text>
        </nut-grid-item>
        <nut-grid-item>
          <image src="../../static/byjt.png" class="h-70" />
          <text class="text-[#f56c23] text-5">博雅讲坛</text>
        </nut-grid-item>
        <nut-grid-item>
          <image src="../../static/byxs.png" class="h-70" />
          <text class="text-[#f56c23] text-5">博雅修身</text>
        </nut-grid-item>
        <nut-grid-item>
          <image src="../../static/bysy.png" class="h-70" />
          <text class="text-[#f56c23] text-5">博雅视野</text>
        </nut-grid-item>
      </nut-grid>
    </view>
    <view>
      <Card title="推荐活动">
        <nut-swiper :init-page="1" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
          <nut-swiper-item>
            <ActivityCard @click="() => goToActivityDetail(1)"
              imgUrl="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-ji.net%2FtujiJDAwMy50YW9iYW9jZG4uY29tL2Jhby91cGxvYWRlZC9pMy9UQjFIY1ZfRlYkNlgyWFYkNSQz.jpg&refer=http%3A%2F%2Fwww.t-ji.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666700890&t=07763c3ed57ee0e02acb28e33cb993d2"
              title="思想政治1：经济与生活" :publishDate="new Date('2020-07-18 21:11')" :startDate="new Date('2020-05-24 10:15')" :endDate="new Date('2020-05-24 11:15')"
              :reserved="7" :rest="10" :point="0.6" address="图书馆六楼602" />
          </nut-swiper-item>
        </nut-swiper>
      </Card>
      <Card title="近期活动">
        <ActivityCard @click="() => goToActivityDetail(1)"
          imgUrl="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-ji.net%2FtujiJDAwMy50YW9iYW9jZG4uY29tL2Jhby91cGxvYWRlZC9pMy9UQjFIY1ZfRlYkNlgyWFYkNSQz.jpg&refer=http%3A%2F%2Fwww.t-ji.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666700890&t=07763c3ed57ee0e02acb28e33cb993d2"
          title="昂达查查a当初昂蒂说昂ajd" :publishDate="new Date()" :startDate="new Date()" :endDate="new Date()" :reserved="3"
          :rest="7" :point="10" address="图书馆六楼602" />
      </Card>
    </view>
  </view>
</template>